<template>
   <div class="yw-order-container" @click="closeMenu()">
      <van-nav-bar title="我的订单" left-text="" left-arrow class="icon-return" @click-left="$router.push({name:'centerAll'})">
        <van-icon name="search" slot="right" @click="filter=true" id="search"/>
      </van-nav-bar>
      <van-popup v-model="filter" position="top" :overlay="false">
          <ul class="filter">
            <li><span @click="getList()">全部</span></li>
            <li><span @click="getListNo()">未完成</span></li>
            <li><span class="bb0" @click="getListYes()">已完成</span></li>
          </ul>
      </van-popup>
      <van-tabs v-model="active">
        <van-tab title="我下的单" class="Orderlist">
          <!-- 1 -->
          <van-list v-model="loading" :finished="finished" @load="onLoad()">
          <p class="arrayNull" v-if="nullData">暂无数据</p>                
          <ul v-for="(val,index) in orderList" :key="index" v-else>           
            <li class="line">
              <van-row>
                <van-col span="12"><img class="img-radius" :src="val.seller?$imgPath(val.seller.headImg):''" @click="listentoPersonalEvent(index,1)"/><span class="fl">{{val.seller?val.seller.nickname:''}}</span></van-col>
                <van-col span="12" class="text-align-r">
                  <span class="statue" v-if="val.status==1"  @click="listentoOrderlistEvent(index,1)">待支付
                    <img class="arrow-img" src="../assets/image/order/icon_arrow@3x.png" alt="">
                  </span>
                  <span class="statue" v-if="val.status==2"  @click="listentoOrderlistEvent(index,1)">已支付
                    <img class="arrow-img" src="../assets/image/order/icon_arrow@3x.png" alt="">
                  </span>
                  <span class="statue" v-if="val.status==3"  @click="listentoOrderlistEvent(index,1)">已接单
                    <img class="arrow-img" src="../assets/image/order/icon_arrow@3x.png" alt="">
                  </span>
                  <span class="statue" v-if="val.status==4"  @click="listentoOrderlistEvent(index,1)">进行中
                    <img class="arrow-img" src="../assets/image/order/icon_arrow@3x.png" alt="">
                  </span>
                  <span class="statue" v-if="val.status==101||val.status==102"  @click="listentoOrderlistEvent(index,1)">已取消
                    <img class="arrow-img" src="../assets/image/order/icon_arrow@3x.png" alt="">
                  </span>
                  <span class="statue" v-if="val.status==10"  @click="listentoOrderlistEvent(index,1)">已完成
                    <img class="arrow-img" src="../assets/image/order/icon_arrow@3x.png" alt="">
                  </span>
                </van-col>
              </van-row>
            </li>
            <li class="line" @click="listentoOrderlistEvent(index,1)">
              <p>
                <span class="font-3" v-if="val.goods&&val.goods.length>0&&val.goods[0].type==1">{{val.goods[0].goodsName}}</span>               
                <!-- 已取消 -->                 
                <!-- <span class="color-default fr" v-if="val.status==10&&val.complains&&val.complains.length>0&&val.complains[0].status==4">退款成功</span> -->
                <span class="color-default fr" v-if="val.status==102&&val.payinfos&&val.payinfos.length>0&&val.payinfos[0].status==3">退款成功</span>                       
              </p>
              <p>
                <span>{{val.useStartTime}}~{{val.useEndTime}}</span><span class="margin-left">{{val.goods[0].count}}小时</span>
                <span class="color-default fr font-34 font-w7">{{val.payAmount}}钻石</span>
              </p>
            </li>
            <li class="line">              
              <van-row >
                <van-col span="24" class="text-align-r">
                  <span class="color-default Pendingorder" v-if="val.status==1" @click="listentoOrderlistEvent(index,1)">去支付（剩余{{val.fm}}）</span>
                  <span class="color-default Pendingorder" v-if="val.status==2">待接单（剩余{{val.fm}}）</span>
                  <span class="label1 label-font Articleorder" v-if="val.comment==0&&val.status==10" @click="comment(index)">评价</span>                 
                  <span class="label1 label-font" v-if="val.comment==1" @click="serviceDetail(index)">再来一单</span>
                  <span class="label0 label-3 Removeorder" v-if="val.status==101||(val.status==102&&val.payinfos!=null&&val.payinfos[0].status==3)" @click="dropOrder(index)">删除订单</span>
                </van-col>
              </van-row>     
            </li>               
          </ul>   
        </van-list> 
          <!-- 1 -->
        </van-tab>
        <van-tab title="我接的单" class="Orderlist">
          <!-- 0 -->
          <van-list v-model="loading" :finished="finished" @load="onLoad()">
          <p class="arrayNull" v-if="nullData">暂无数据</p>
          <ul v-for="(val,index) in orderList" :key="index" v-else>
            <li class="line">
              <van-row>
                <van-col span="12"><img class="img-radius" :src="val.buyer?$imgPath(val.buyer.headImg):''" @click="listentoPersonalEvent(index,2)"/><span class="fl">{{val.buyer?val.buyer.nickname:''}}</span></van-col>
                <van-col span="12" class="text-align-r">
                 <!--  <span class="statue" v-if="val.status==1"  @click="listentoOrderlistEvent(index,2)">待支付</span> -->
                  <span class="statue" v-if="val.status==2"  @click="listentoOrderlistEvent(index,2)">已支付</span>
                  <span class="statue" v-if="val.status==3"  @click="listentoOrderlistEvent(index,2)">已接单</span>
                  <span class="statue" v-if="val.status==4"  @click="listentoOrderlistEvent(index,2)">进行中</span>
                  <span class="statue" v-if="val.status==101||val.status==102"  @click="listentoOrderlistEvent(index,2)">已取消</span>
                  <span class="statue" v-if="val.status==10"  @click="listentoOrderlistEvent(index,2)">已完成</span>
                </van-col>
              </van-row>
            </li>
            <li class="line" @click="listentoOrderlistEvent(index,2)">
              <p>
                <span class="font-3" v-if="val.goods&&val.goods!=null&&val.goods[0].type==1">{{val.goods[0].goodsName}}</span>
                <!-- 已取消 -->                
                <span class="color-default fr" v-if="val.status==102&&val.payinfos&&val.payinfos.length>0&&val.payinfos[0].status==3">退款成功</span> 
                <span class="color-default fr" v-if="val.status==102&&val.payinfos&&val.payinfos.length>0&&val.payinfos[0].status==2">退款中</span>              
              </p>
              <p>
                <span>{{val.useStartTime}}~{{val.useEndTime}}</span><span class="margin-left" v-if="val.goods&&val.goods[0]!=null">{{val.goods[0].count}}小时</span>
                <span class="color-default fr font-34 font-w7">&yen;{{val.payAmount}}</span>
              </p>
            </li>
            <li class="line clearfix">
              <!-- 已支付 -->
              <van-row>
                <van-col span="24" class="text-align-r">
                  <span class="label1 label-font" v-if="val.status==2" @click="jie(val)">接单(剩余{{val.fm}})</span>
                  <span class="text-align-r color-6" v-if="val.status==102">错过了接单时间</span>
                </van-col>
              </van-row>
              <van-col span="24" class="text-align-r" v-if="val.comment==1&&val.comments&&val.comments.length>0&&val.comments[0]!=null"> 
                <van-rate v-model="val.comments[0].rank" :size="16" :count="5" disabled disabled-color="#D84F4D"/>
              </van-col>
              <!-- 已完成 end// -->
            </li>
          </ul>
          </van-list> 
          <!-- 0 -->
        </van-tab>
      </van-tabs>
      <!-- 评论弹框pop -->
      <van-popup v-model="artShow" class="yw-popup">
          <detail-content v-on:listentoChildEvent="closePopup" :orderId="orderId" :goodsId="goodsId"></detail-content>
      </van-popup>
      <!-- end// -->   
   </div>
</template>
<script>
  import store from '../store'
  import { Dialog,Rate, Toast,Popup,Tab, Tabs,Row, Col } from 'vant'
  import apiHttp from '../api/index'
  import contentChild from '@/components/orderChild/articlePop'
  export default {
  data() {
    return {
      loading:false,
      finished:false,
      page:-1,
      size:10,
      totalElements:-1,
      goodsId:'',
      orderId:'',
      artShow: false,//评价弹框
      orderList:[],
      active: 0,
      filter: false,
      jieDanTime:'',
      remainTime:'',
      userId:"",
      userId:"",
      typeArr:[],   //服务信息（例如：段位等级） 
      statusArr:[],     //订单状态 （数据筛选时的参数）
      orderType:1  ,
      nullData:false
    }
  },
  components:{
    'detail-content': contentChild
  },
  watch:{
    active(newVal,oldVal){
      this.orderList = []
      this.finished = false
      this.page = -1
      this.totalElements = -1
      if(newVal == 0){
        this.orderType = 1;
      }else{
        this.orderType=2;
      }
      this.onLoad();
    }
  },
  created(){
    this.remainTime = localStorage.getItem('remainTime')
  },
  mounted(){
    let self = this
     let timer = setInterval(()=> {
      for (let key in this.orderList) {
        if(self.orderList[key].tiemCha > 0){
          self.orderList[key].tiemCha = self.orderList[key].tiemCha-1000
          self.orderList[key].fm = self.$countDown(self.orderList[key].tiemCha)
        }
        /* console.log("订单列表倒计时")
        console.log(this.orderList[key].fm) */
        /*  if(self.orderList[key].fm=='0分0秒'){
          console.log("时间到");
          clearInterval(timer)
        } */
        
      }
    }, 1000);
       
  },
  methods: {
    //下拉刷新
    onLoad(){
      let self = this
      if(this.orderList.length == this.totalElements){
          this.finished = true
          this.loading = false
      }else{          
        self.page++
        if(self.orderType == 1){
          self.getOrderBuyList()
        }else{
          self.getOrderJieList()
        }
        
      }                  
    },
    //关闭菜单选择弹框
    closeMenu(elem){
        var e = e || window.event; //浏览器兼容性 		
        var elem = e.target || e.srcElement;		
        while (elem) { //循环判断至跟节点，防止点击的是div子元素 			
            if (elem.id && elem.id == 'search') {				
              return;			
            }			
          elem = elem.parentNode;	
        }	
        this.filter = false;	
    }, 
    //计时器
    /* checkTime(){
      this.remainTime = this.remainTime -1000   
      this.minutes = parseInt((this.remainTime % (1000 * 60 * 60)) / (1000 * 60))
      this.seconds = parseInt((this.remainTime % (1000 * 60)) / 1000)
      var self = this  
      this.clearTime = setTimeout(()=>{        
          self.checkTime()           
      },1000)
     
    }, */
    /* 获取我下的单订单列表   0下的单，1接的单 */
    getOrderBuyList(){
      let params = {
          businessType: 0,
          status: this.statusArr
      }
      apiHttp.orderIndex.indexOrderList(this.page,this.size,params,resp=>{
        if(resp.code==200){
            let xtTime = resp.message      
            for(var i=0;i<resp.data.content.length;i++){                                                        
                resp.data.content[i].useStartTime = this.$str(this.$time(resp.data.content[i].useStartTime),0,16)
                resp.data.content[i].useEndTime = this.$str(this.$time(resp.data.content[i].useEndTime),0,16)
                if(resp.data.content[i].status==1){
                 resp.data.content[i].tiemCha = (resp.data.content[i].createTime + 600000 - xtTime)
                } 
                if(resp.data.content[i].status==2 && resp.data.content[i].payinfos && resp.data.content[i].payinfos.length>0){
                   resp.data.content[i].tiemCha = (resp.data.content[i].payinfos[0].payTime + 600000 - xtTime)
                } 
                resp.data.content[i].fm = ''
                if(resp.data.content.goods!=null){
                    this.typeArr.push(this.$getJson(resp.data.content[i].goods[0].goodsType));
                    resp.data.content[i].goods[0].goodsType = this.typeArr[i]; 
                } 
                if(resp.data.content[i].seller.headImg==null || resp.data.content[i].seller.headImg==''){
                  resp.data.content[i].seller.headImg = '/user/head/defaultHeadImage.png';
                }                       
                this.orderList.push(resp.data.content[i]);                                                
            }                                      
              this.loading = false
              this.totalElements = resp.data.totalElements 
              if(this.orderList.length==0){
                this.nullData = true
              }else{
                 this.nullData = false
              }
        }else{
          Toast(resp.message);
        }
      })
    },
    /* 获取我接的单订单列表   0下的单，1接的单 */
    getOrderJieList(){   
      let params = {
        businessType:1,
        status:this.statusArr
      }
      apiHttp.orderIndex.indexOrderList(this.page,this.size,params,resp=>{
        if(resp.code==200){ 
           let xtTime = resp.message   
            console.log(resp.data.content)          
            for(var i=0;i<resp.data.content.length;i++){                                                        
                resp.data.content[i].useStartTime = this.$str(this.$time(resp.data.content[i].useStartTime),0,16);
                resp.data.content[i].useEndTime = this.$str(this.$time(resp.data.content[i].useEndTime),0,16);
                if(resp.data.content[i].status==1){
                 resp.data.content[i].tiemCha = (resp.data.content[i].createTime + 600000 - xtTime)
                } 
                if(resp.data.content[i].status==2&& resp.data.content[i].payinfos && resp.data.content[i].payinfos.length>0){
                   resp.data.content[i].tiemCha = (resp.data.content[i].payinfos[0].payTime + 600000 - xtTime)
                }
                  resp.data.content[i].fm = ''                                                     
                 if(resp.data.content.goods!=null){
                    this.typeArr.push(this.$getJson(resp.data.content[i].goods[0].goodsType));
                    resp.data.content[i].goods[0].goodsType = this.typeArr[i]; 
                 }
                 if(resp.data.content[i].buyer.headImg==null || resp.data.content[i].buyer.headImg==''){
                    resp.data.content[i].buyer.headImg = '/user/head/defaultHeadImage.png';
                 }              
                this.orderList.push(resp.data.content[i])             
            }             
                this.loading = false
                this.totalElements = resp.data.totalElements 
                if(this.orderList.length==0){
                  this.nullData = true
                }else{
                 this.nullData = false
              }
        }else{
          Toast(resp.message);
        }
      })
    },
    init(){
      this.finished = false
      this.page = -1;
      this.totalElements = -1;
      this.orderList = [];
    },
    //获取全部订单
    getList(){
      this.init();
      this.statusArr = [];
      this.onLoad();
    },
    //获取未完成订单
    getListNo(){
      this.init()
      this.statusArr = [1,2,3,4];
      this.onLoad();
    },
    //获取完成订单
    getListYes(){
      this.init();
      this.statusArr = [10,101,102];
      this.onLoad();
    },
    //跳转个人中心
    listentoPersonalEvent(index,type) {      
      if(type==1){
          this.userId = this.orderList[index].seller.id;
      }
      if(type==2){
         this.userId = this.orderList[index].buyer.id;
      }
      this.$router.push({
          name:'center' ,
          query:{userId:this.userId}        
      });         
    },
    //跳到订单详情页面
    listentoOrderlistEvent(index,type) {
           this.orderId = this.orderList[index].id;
           /*  if(type==1){
                this.orderId = this.orderList[index].id;
            }
            if(type==2){
                this.orderId = this.orderList[index].id;
            } */
            this.$router.push({
                name:'orderDetail',
                params:{orderId:this.orderId},
                query:{type:type}              
            });             
    },
    //弹出评价页面
    comment(index){
        this.goodsId = this.orderList[index].goods[0].goodsId;
        this.orderId = this.orderList[index].id;      
        this.artShow = true;
    },
    //关闭弹框
    closePopup() {
      this.artShow = false
    },
    //跳到服务详情页面（缺少服务id）
    serviceDetail(index){
        this.$router.push({
                name:"detail",
                params:{
                    userId:this.orderList[index].seller.id,
                    serviceId:this.orderList[index].goods[0].goodsType.serviceId,
                    serviceAuthId:this.orderList[index].goods[0].goodsId
                }
        }); 
    },
    //删除订单
    dropOrder(index){
        this.$dialog.confirm({
            title:'提示',
            message:"您好，订单删除后，订单不可恢复，确认删除么？"
        }).then(() => {  
          //调用删除订单方法   
          this.deleteor(index);
        }).catch(() => {
            // on cancel
        })
    },
     //调用订单删除接口   
    deleteor(index){
        let self = this
        this.orderId = this.orderList[index].id;        
        let params = {
            orderId:this.orderId
        }          
        apiHttp.orderIndex.deleteOrder(this.orderId,params,resp=>{ 
            if(resp.code==200){
              Toast("订单删除成功！");
             this.orderList.splice(index,1)
            }else{
              Toast(resp.message);
            }                                                                  
        })
    },
    //我接的单中状态为已支付时点击（接单）触发的事件（弹框提示）
    jie(item){
        this.$dialog.confirm({
            title:'提示',
            message: "亲爱的陪玩师，接单后请及时联系用户哦！"
        }).then(() => { 
          //调用陪玩接单方法                  
          this.accept(item.id);         
        }).catch(() => {
            // on cancel
        })
    },
    //陪玩接单调用接口
    accept(orderId){                 
        apiHttp.orderIndex.acceptOrder(orderId,'',resp=>{ 
            if(resp.code == 200){              
              Toast('接单成功！') 
              this.$router.push({
                name:'orderDetail',
                params:{orderId:orderId},
                query:{type:2}              
              });           
            }else{
              Toast(resp.message)
            }                                         
        })
    },
    

  }
};
</script>
<style scoped>
.arrow-img{
  width: 0.4rem !important;
  height: 0.6rem !important;
  margin-left: 0.2rem;
  position: relative;
  top: 0.1rem;
}
.van-dialog{
  border-radius: 8px;
}
.yw-popup {
  width: 80%;
  text-align: center;
  border-radius: 0.4rem;
}
.margin-left{
  margin-left: 0.6rem;
}
.label-font{
  font-size: 0.46rem;
  color: #d84e4d;
}
.img-radius{
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  float: left;
  margin-right: 0.4rem;
}
.Orderlist ul {
    margin: 0.6rem 0.6rem;
    box-shadow: 0.08rem 0.04rem 0.8rem 0.04rem #f4f4f4;
    border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}
.Orderlist li.line {
    padding: 0.4rem 0.6rem;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.Orderlist li.line:nth-child(1) {
  line-height: 1.6rem;
}
.Orderlist li.line:nth-child(2) p:nth-child(2) {
  padding-top: 0.2rem;
}
.Orderlist li.line:nth-child(3) {
  line-height: 1.2rem;
  border: 0;
}
/*评价订单*/
.Orderlist li.line:nth-child(3) span.Articleorder {
  background: url('../assets/image/order/icon_evaluate@2x.png') no-repeat 0.3rem center;
  background-size: 0.48rem 0.48rem;
  padding: 0.1rem 0.6rem 0.1rem 1.3rem;
  background-position: 0.6rem 0.15rem;
}
/*删除订单*/
.Orderlist li.line:nth-child(3) span.Removeorder {
  background: url('../assets/image/order/icon_delete@2x.png') no-repeat 0.15rem center;
  background-size: 0.48rem 0.48rem;
  padding: 0.2rem 0.4rem 0.2rem 0.9rem;
}
/*待接单*/
.Orderlist li.line:nth-child(3) span.Pendingorder {
  background: url('../assets/image/order/icon_hourglass@2x.png') no-repeat;
  background-size: 0.42rem 0.48rem;
  padding-left: 0.6rem;
}
.Orderlist .statue {
  display: block;
}
.filter li {
  padding-left: 2.4rem;
  line-height: 1.6rem;
}
.filter li span {
  display: block;
  margin-right: 2.4rem;
  border-bottom: 0.02rem solid #666;
}
.filter li:nth-child(1) {
  background: url('../assets/image/order/icon_whole@2x.png') no-repeat 1.4rem 0.56rem;
  background-size: 0.52rem 0.52rem;
}
.filter li:nth-child(2) {
  background: url('../assets/image/order/icon_ unfinished @2x.png') no-repeat 1.4rem 0.48rem;
  background-size: 0.56rem 0.56rem;
}
.filter li:nth-child(3) {
  background: url('../assets/image/order/icon_complete@2x.png') no-repeat 1.4rem 0.48rem;
  background-size: 0.56rem 0.56rem;
}
</style>